import React, { Component } from 'react';
import { Link } from 'react-router-dom';
// require ('./../mock')


class Com extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dat:[]
    }
  }
  componentDidMount() {
    let f_name = '月度最佳';
    let name = JSON.stringify(f_name)
    fetch(`https://sun.daxunxun.com/api/food/type?f_type=`+name)
    .then(res => res.json())
    .then(data => {
      console.log(data)
      this.setState({
        dat: data
      })
    })
  }
  goDetail (fid){
    this.props.history.push('/detail/' + fid)
  }
  recipes_Raight (){

  }
  render() {
    let dat = this.state.dat
    let pop = [];
    for (let i in dat ) {
      if (i<6) {
      //  console.log(dat[i])
       let fid = dat[i].f_id  // 获取食物id
        pop.push(
          <li  key={dat[i].f_id} onClick={ this.goDetail.bind(this, fid)}>
            <div className="popImg">
              <img src = {dat[i].banner} alt=""/>
            </div>
            <p  key={dat[i].f_id}>{dat[i].name}</p>
            
          </li>
        )
      }
    }
    return (
     
      <div className="Kind_Popular">
        <div className="Kind_Popular_nav">
          <b>相关菜谱</b>
          
        </div>
        <div className="Kind_Popular_ul">
          <ul className="_Popular_ul">
            {
              pop
            }
        </ul>

        </div>
      
    </div>
    
  )
  }
}

export default Com;